<template>
  <div class="root">
    <div class="content">
      <div class="class-name">
        {{className}}学员面试记录管理
      </div>
      <div class="add-interview-button">
        <button @click="toggleDialog(INTERVIEW_ACTION.ADD)">添加面试记录</button>
      </div>
      <div class="table-container">
        <div v-for="(student,key) in tableData" :key="key" class="every-student-info">
          <div class="student-info-title">
              <span class="title-header">姓名</span>
              <span class="title-content">{{student.name}}</span>
              <span class="title-header">年龄</span>
              <span class="title-content">{{student.age}}</span>
              <span class="title-header">学校</span>
              <span class="title-content">{{student.school}}</span>
              <span class="title-header">专业</span>
              <span class="title-content">{{student.major}}</span>
              <span class="title-header">学历类型</span>
              <span class="title-content">{{student.school_type}}</span>
              <span class="title-header">毕业时间</span>
              <span class="title-content">{{student.graduation_date}}</span>
              <span class="title-header">是否获得毕业证</span>
              <span class="title-content">{{student.has_graduation_cert===true?"是":"否"}}</span>
              <span class="title-header">联系电话</span>
              <span class="title-content">{{student.phone}}</span>
              <div class="student-info-button">
                <span class="iconfont" v-show="student.showInterviewInfo===false" @click="getStudentInterviewInfo(student,true)">&#xe689;</span>
                <span class="iconfont" v-show="student.showInterviewInfo===true" @click="getStudentInterviewInfo(student,false)">&#xe600;</span>
              </div>
          </div>
          <div class="student-interview-record"  v-show="student.showInterviewInfo">
            <el-table :data="student.interviewInfoList" style="width: 80%">
              <el-table-column fixed prop="interview_time" label="面试时间" width="140" />
              <el-table-column prop="company_name" label="面试公司" width="160" />
              <el-table-column prop="interview_type" label="面试类型" width="80" />
              <el-table-column prop="work_location" label="所在城市" width="80" />
              <el-table-column prop="interview_rounds" label="面试轮次" width="80" />
              <el-table-column prop="interview_result" label="面试结果" width="80" />
              <el-table-column prop="lecturer_comment" label="讲师评价" width="160" />
              <el-table-column prop="interview_video" label="面试录音" width="100" >
                <template #default="scope">
                  <el-button v-if="scope.row.interview_record" type="primary" @click="showVideo(scope.row.interview_record)">播放</el-button>
                </template>
              </el-table-column>
              <el-table-column prop="interview_question" label="面试题目" width="120" >
                <template #default="scope">
                  <span class="modify">修改</span>
                  <span class="separator">/</span>
                  <span class="look">查看</span>
                </template>
              </el-table-column>
              <el-table-column prop="operation" label="操作" width="120" >
                <template #default="scope">
                  <span class="modify" @click="toggleDialog(INTERVIEW_ACTION.UPDATE,scope.row)">修改</span>
                  <span class="separator">/</span>
                  <span class="look">查看</span>
                  <span class="separator">/</span>
                  <span class="assess" @click="showCommentDialog(scope.row)">评价</span>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>
    <InterviewSet></InterviewSet>
    <InterviewComment></InterviewComment>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue';
import { useRoute } from 'vue-router';
import {getStudentByClassIdAPI} from "@/network/student/student";
import { ElMessage } from "element-plus"
import {getInterviewByStudentIdAPI} from "@/network/interview/interview";
import { useInterviewStore } from "@/store/store-interview";
import InterviewSet from "@/components/class/interview/InterviewSet.vue";
import InterviewComment from "@/components/class/interview/InterviewComment.vue";
import EventBus from "@/plugins/event-bus";
import {INTERVIEW_TYPE,INTERVIEW_ACTION} from "@/dict/dict-interview";
import {useSysDictStore} from "@/store/store-sys-dict-pinia";
import {SYS_DICT} from "@/dict/dict-sys";

const sysDictStore = useSysDictStore();
// 取面试结果的字典
sysDictStore.getSysDict([SYS_DICT.INTERVIEW_RESULT])
let interviewResultOptions = sysDictStore.INTERVIEW_RESULT

const interviewStore = useInterviewStore();
const toggleDialog = (operationType,updateData) => {
  if(operationType===INTERVIEW_ACTION.ADD){
    interviewStore.toggleInterviewStoreDialogVisible();
    EventBus.emit("add-interview-data-event",{
      classId:classId.value,
      className:className.value,
      actionType:INTERVIEW_ACTION.ADD
    })
  }else if (operationType===INTERVIEW_ACTION.UPDATE){
    interviewStore.toggleInterviewStoreDialogVisible();
    updateData.actionType=INTERVIEW_ACTION.UPDATE
    updateData.classId = classId.value
    updateData.className = className.value
    EventBus.emit("update-interview-data-event",updateData)
  }
};


const route = useRoute();
const classId = ref('');
const className = ref("")
// 获取路径上的classId
classId.value = route.params.classId;
className.value = route.params.className;
let tableData = ref([]);
onMounted(()=>{
//  页面加载的时候，根据路径上的班级id请求这个班的全部学员
  getStudentByClassIdAPI(classId.value).then((res)=>{
    // console.log(res.data)
    if(res.data.code!=0){
      ElMessage.error("学员信息获取失败")
    }else{
      tableData.value = res.data.data;
      tableData.value.forEach(item=>{
      item.showInterviewInfo=false;
    })
      EventBus.emit("student-list-event", tableData.value)
    }
  })
})

//  这里需要根据每一个学员再获取学员的面试信息
let getStudentInterviewInfo = (student,isShow)=>{
  student.showInterviewInfo = isShow;
  if(isShow === true){
    //  构造请求体
    let requestData = {
      "query_base": {
        "skip": 1,
        "limit": 100
      },
      "student_id": student.id
    }
    getInterviewByStudentIdAPI(requestData).then((res)=>{
      console.log(res.data)
      if (res.data.code != 0){
        ElMessage.error(res.data.message);
      }else{
        student.interviewInfoList = res.data.data;
        student.interviewInfoList.forEach((item)=>{
          item.interview_time =  item.interview_time.replace("T"," ").substring(0,16)
          item.interview_type = INTERVIEW_TYPE[item.interview_type]
          item.interview_result = interviewResultOptions[item.interview_result]
          if(item.lecturer_comment != null){
            item.lecturer_comment = item.lecturer_comment.length > 8 ? item.lecturer_comment.substring(0,8) + "......": item.lecturer_comment
          }
        })
      }
    })
  }
}

const showVideo=(videoUrl)=>{
  let url = process.env.VUE_APP_BASE_FILE_URL + videoUrl
  window.open(url, '_blank');
}

// 评价面试记录的逻辑
const showCommentDialog = (data)=>{
  EventBus.emit("interview-comment-event",data)
}

</script>

<style scoped lang="less">
.root{
  .sys-name{
    text-align: left;
    margin-left: 30px;
    margin-top: 30px;
  }
  .content{
    margin:0 auto;
    width: 1400px;
    .add-interview-button{
      text-align: right;
      >button{
        margin-right: 100px;
        width: 120px;
        height: 40px;
        border-radius: 10px;
        background-color: #3DB590;
        color:white;
        font-weight: bold;
      }
    }
    .class-name{
      font-weight: bold;
      font-size: 20px;
    }
    .table-container{
      margin-top: 30px;
      background-color: white;
      border-radius: 10px;
      box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5);
      padding-top: 30px;
      padding-bottom: 30px;
      margin-bottom: 30px;
      .every-student-info{
        margin-top: 20px;
        .student-info-title{
          width: 800px;
          margin-left: 20%;
          >span{
            display: inline-block;
            border: 1px solid #4FD1C5;
            height: 30px;
            line-height: 30px;
            margin-top: 5px;
          }
          .title-header{
            width: 160px;
            font-weight: bold;
            background-color: #4FD1C5;
            color:white;
          }
          .title-content{
            width: 200px;
          }
          .student-info-button{
            text-align: left;
            margin-left: 20%;
            padding-left: 27%;
            span{
              display: inline-block;
              width: 30px;
              height: 30px;
              line-height: 30px;
              text-align: center;
              border-radius: 50%;
              color:white;
              cursor: pointer;
            }
          }
        }
        .student-interview-record{
          // 只有这样布局方式才能让table居中显示
          display: flex;
          justify-content: center;
          align-items: center;

        .modify,.look,.assess{
          color: #409FFF;
          cursor: pointer;
          &:hover{
            color: #0451a3;
          }
        }
        .separator{
        }

        }
      }
    }
  }
}
</style>